<template>
  <view class="order-list-container">
    <!-- 订单状态选项卡 -->
    <order-tab-bar 
      :tabs="tabs" 
      v-model:active="activeTab"
    />
    
    <!-- 订单列表 -->
    <scroll-view 
      class="order-scroll" 
      scroll-y
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <!-- 空状态 -->
      <empty-order v-if="orders.length === 0 && !loading" />
      
      <!-- 订单卡片 -->
      <order-card 
        v-for="order in orders" 
        :key="order.id"
        :order="order"
        @click="viewOrderDetail(order.id)"
      />
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <text>{{loading ? '加载中...' : '上拉加载更多'}}</text>
      </view>
      <view class="no-more" v-else-if="orders.length > 0">
        <text>没有更多了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getOrderList } from '@/api/order'
import OrderTabBar from './components/OrderTabBar.vue'
import OrderCard from './components/OrderCard.vue'
import EmptyOrder from './components/EmptyOrder.vue'

// 订单状态选项卡
const tabs = ref([
  { value: 'all', label: '全部' },
  { value: 'unpaid', label: '待付款' },
  { value: 'unsent', label: '待发货' },
  { value: 'shipped', label: '待收货' },
  { value: 'completed', label: '已完成' }
])

// 当前激活的标签
const activeTab = ref('all')

// 订单数据
const orders = ref([])
const loading = ref(false)
const refreshing = ref(false)
const page = ref(1)
const pageSize = 10
const hasMore = ref(true)

// 加载订单数据
const loadOrders = async (reset = false) => {
  if (loading.value) return
  
  try {
    loading.value = true
    if (reset) {
      page.value = 1
      hasMore.value = true
    }
    
    const params = {
      status: activeTab.value === 'all' ? undefined : activeTab.value,
      page: page.value,
      pageSize
    }
    
    const res = await getOrderList(params)
    const newOrders = res.data.list || []
    
    if (reset) {
      orders.value = newOrders
    } else {
      orders.value = [...orders.value, ...newOrders]
    }
    
    hasMore.value = newOrders.length >= pageSize
    page.value++
  } catch (e) {
    console.error('加载订单失败', e)
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  loadOrders(true)
}

// 上拉加载更多
const loadMore = () => {
  if (!hasMore.value || loading.value) return
  loadOrders()
}

// 查看订单详情
const viewOrderDetail = (orderId) => {
  uni.navigateTo({
    url: `/pages/order/detail?id=${orderId}`
  })
}

// 监听标签切换
watch(activeTab, () => {
  loadOrders(true)
})

// 初始化加载
onLoad((options) => {
  if (options.status) {
    activeTab.value = options.status
  }
  loadOrders(true)
})
</script>

<style lang="scss">
.order-list-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  
  .order-scroll {
    flex: 1;
    
    .load-more, .no-more {
      text-align: center;
      padding: 20rpx 0;
      font-size: 26rpx;
      color: #999;
    }
  }
}
</style>